<template>
  <!-- start header -->
  <header>
    <div class="top center">
      <div class="left fl">
        <ul>
          <li><router-link to="/home">小王商城</router-link></li>
          <li>|</li>
          <li><a href="">分类</a></li>
          <li>|</li>
          <li><a href="">天猫</a></li>
          <li>|</li>
          <li><a href="">游戏</a></li>
          <li>|</li>
          <li><a href="">多看阅读</a></li>
          <li>|</li>
          <li><a href="">聚划算</a></li>
          <li>|</li>
          <li><a href="">金融</a></li>
          <li>|</li>
          <li><a href="">问题反馈</a></li>
        </ul>
      </div>
      <div class="right fr">
        <div class="gouwuche fr">
          <el-icon style="font-size: 20px;margin-right: 20px;vertical-align:-4px"><ShoppingCart/></el-icon>
          <a href="">购物车</a>
        </div>
        <div class="fr">
          <ul>
            <a v-show="check">
            <li><router-link to="/login">登录</router-link></li>
            <li>|</li>
            <li><router-link  to="/register">注册</router-link></li>
            </a>
            <a v-show="!check">
              <li>欢迎{{user.username}}大驾光临</li>
              <li>|</li>
              <li><a  @click="logout">退出登录</a></li>
              <li>|</li>
            </a>
            <li v-if="user.role==2"><router-link to="/admin">后台管理</router-link></li>
            <li>|</li>
            <li><router-link to="/myself">个人中心</router-link></li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
      <div class="clear"></div>
    </div>
  </header>
  <!--end header -->
</template>

<script>
import {ShoppingCart} from '@element-plus/icons-vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import {computed, ref, watch,getCurrentInstance} from "vue";
import {reqLogout} from "@/api";
import {ElMessage} from "element-plus";
export default {
  name: "Header",
  components:{
    ShoppingCart
  },
  setup(){
    const store=useStore()
    const user=computed(()=>{
      return store.state.user.user
    })

    const check=computed(()=>{
      return store.state.user.check
    })
    const router=useRouter()
    /**
     * 退出登录
     * @returns {Promise<void>}
     */
    const logout=async ()=>{
      const result=await reqLogout()
      if (result.status==10000){
        ElMessage.success('退出成功')
        store.commit('GETUSERINFO',{})
        store.commit('CHANGECHECK',true)
        await router.push('/login')
      }else{
        ElMessage.error('系统异常')
      }
    }
    return {user,logout,check}
  }
}
</script>

<style scoped>
*{margin: 0;padding: 0;text-decoration: none;list-style-type: none;font-family: Times New Roman;}
img{border:none;}
a{border:none;text-decoration: none;color:#000;}
.center{margin: 0 auto;}
.fl{float: left;}
.fr{float: right;}
.clear{clear:both;}
/*header*/
header{width: 100%;height: 40px;background: #333;margin-top: -10px}
header .top{width: 1226px;height: 40px;line-height: 40px;}
header .top .left ul li{float: left;font-size: 12px;color: #ccc;}
header .top .left ul li a{display:block;padding:0 8px;font-size: 12px;font-family: Times New Roman;color: #b0b0b0;}
header .top .left ul li a:hover{color:#fff;}
header .top .right ul li{float: left;font-size: 12px;color: #ccc;}
header .top .right ul li a{display:block;padding:0 8px;font-size: 12px;font-family: Times New Roman;color: #b0b0b0;}
header .top .right ul li a:hover{color:#fff;}
header .top .right .gouwuche a{color:#fff;}
header .top .right .gouwuche{margin:0 20px;background: #424242;width: 120px;text-align: center;font-size: 12px;cursor:pointer;background: #ff6700;color: #fff;}
header .top .right .gouwuche:hover{color:#000;background: #666;}
</style>
